<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: http:;">
  <title>Tab Bar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      overflow: hidden;
      user-select: none;
      -webkit-app-region: drag; /* Make tab bar draggable like title bar */

      /* Light mode (default) */
      --bg-primary: #f5f5f5;
      --bg-tab: #e0e0e0;
      --bg-tab-hover: #d5d5d5;
      --bg-tab-active: #fff;
      --border-color: #ddd;
      --border-tab: #ccc;
      --text-primary: #333;
      --text-secondary: #666;
      --accent-color: #007AFF;

      background-color: var(--bg-primary);
    }

    /* Dark mode */
    body.dark-mode {
      --bg-primary: #191919;
      --bg-tab: #2f2f2f;
      --bg-tab-hover: #3f3f3f;
      --bg-tab-active: #252525;
      --border-color: #3f3f3f;
      --border-tab: #404040;
      --text-primary: #e0e0e0;
      --text-secondary: #9b9b9b;
      --accent-color: #4A9EFF;
    }

    /* Dracula Theme */
    body.theme-dracula {
      --bg-primary: #282a36;
      --bg-tab: #44475a;
      --bg-tab-hover: #6272a4;
      --bg-tab-active: #282a36;
      --border-color: #44475a;
      --border-tab: #6272a4;
      --text-primary: #f8f8f2;
      --text-secondary: #6272a4;
      --accent-color: #bd93f9;
    }

    /* Nord Theme */
    body.theme-nord {
      --bg-primary: #2e3440;
      --bg-tab: #3b4252;
      --bg-tab-hover: #434c5e;
      --bg-tab-active: #2e3440;
      --border-color: #4c566a;
      --border-tab: #434c5e;
      --text-primary: #eceff4;
      --text-secondary: #d8dee9;
      --accent-color: #88c0d0;
    }

    /* Gruvbox Dark Theme */
    body.theme-gruvbox-dark {
      --bg-primary: #282828;
      --bg-tab: #3c3836;
      --bg-tab-hover: #504945;
      --bg-tab-active: #282828;
      --border-color: #504945;
      --border-tab: #665c54;
      --text-primary: #ebdbb2;
      --text-secondary: #d5c4a1;
      --accent-color: #fabd2f;
    }

    /* Catppuccin Mocha Theme */
    body.theme-catppuccin-mocha {
      --bg-primary: #1e1e2e;
      --bg-tab: #313244;
      --bg-tab-hover: #45475a;
      --bg-tab-active: #1e1e2e;
      --border-color: #313244;
      --border-tab: #45475a;
      --text-primary: #cdd6f4;
      --text-secondary: #a6adc8;
      --accent-color: #cba6f7;
    }

    /* Catppuccin Macchiato Theme */
    body.theme-catppuccin-macchiato {
      --bg-primary: #24273a;
      --bg-tab: #363a4f;
      --bg-tab-hover: #494d64;
      --bg-tab-active: #24273a;
      --border-color: #363a4f;
      --border-tab: #494d64;
      --text-primary: #cad3f5;
      --text-secondary: #a5adcb;
      --accent-color: #c6a0f6;
    }

    /* Catppuccin Frappe Theme */
    body.theme-catppuccin-frappe {
      --bg-primary: #303446;
      --bg-tab: #414559;
      --bg-tab-hover: #51576d;
      --bg-tab-active: #303446;
      --border-color: #414559;
      --border-tab: #51576d;
      --text-primary: #c6d0f5;
      --text-secondary: #a5adce;
      --accent-color: #ca9ee6;
    }

    /* Catppuccin Latte Theme */
    body.theme-catppuccin-latte {
      --bg-primary: #eff1f5;
      --bg-tab: #ccd0da;
      --bg-tab-hover: #bcc0cc;
      --bg-tab-active: #eff1f5;
      --border-color: #ccd0da;
      --border-tab: #bcc0cc;
      --text-primary: #4c4f69;
      --text-secondary: #6c6f85;
      --accent-color: #8839ef;
    }

    #root {
      width: 100%;
      height: 100%;
    }

    .tab-bar {
      display: flex;
      width: 100%;
      height: 32px;
      background-color: var(--bg-primary);
      border-bottom: 1px solid var(--border-color);
      border-radius: 8px 8px 0 0; /* Rounded corners at top to match window */
      overflow: hidden; /* Clip child elements to rounded corners */
    }

    .nav-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      -webkit-app-region: no-drag;
    }

    .app-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      margin-right: 4px;
      cursor: pointer;
      border-radius: 3px;
      transition: background-color 0.2s;
      -webkit-app-region: no-drag; /* Allow clicking on logo */
      font-size: 14px;
      font-weight: bold;
      color: var(--text-primary);
    }

    .app-logo:hover {
      background-color: var(--bg-tab);
    }

    .logo-menu {
      position: absolute;
      top: 32px;
      left: 8px;
      background-color: var(--bg-tab-active);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      min-width: 220px;
      padding: 8px 0;
      z-index: 1000;
      display: none;
    }

    .logo-menu.show {
      display: block;
    }

    .menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      cursor: pointer;
      text-decoration: none;
      color: var(--text-primary);
      font-size: 13px;
      transition: background-color 0.2s;
      -webkit-app-region: no-drag;
    }

    .menu-item:hover {
      background-color: var(--bg-tab-hover);
    }

    .menu-item-icon {
      font-size: 16px;
    }

    .menu-divider {
      height: 1px;
      background-color: var(--border-color);
      margin: 4px 0;
    }

    .menu-header {
      padding: 8px 16px 4px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: none;
      background: transparent;
      border-radius: 4px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: background-color 0.2s;
      font-size: 16px;
      line-height: 1;
    }

    .nav-btn:hover:not(:disabled) {
      background-color: var(--bg-tab);
    }

    .nav-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .tab-list {
      display: flex;
      align-items: center;
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .window-controls {
      display: flex;
      align-items: center;
      gap: 0;
      -webkit-app-region: no-drag;
    }

    .window-control-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 32px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      color: var(--text-secondary);
      transition: background-color 0.2s;
    }

    .window-control-btn:hover {
      background-color: var(--bg-tab);
    }

    .window-control-btn.close:hover {
      background-color: #e81123;
      color: white;
    }

    /* Prevent dragging on interactive elements */
    .tab, .new-tab-btn, .close-btn {
      -webkit-app-region: no-drag;
    }

    .tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      min-width: 100px;
      max-width: 180px;
      background-color: var(--bg-tab);
      border-right: 1px solid var(--border-tab);
      cursor: pointer;
      transition: background-color 0.2s;
      white-space: nowrap;
    }

    .tab:hover {
      background-color: var(--bg-tab-hover);
    }

    .tab.active {
      background-color: var(--bg-tab-active);
      border-bottom: 2px solid var(--accent-color);
    }

    .tab.pinned {
      min-width: 40px;
      max-width: 40px;
      padding: 6px 8px;
    }

    .favicon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .tab-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      color: var(--text-primary);
    }

    .tab.pinned .tab-title {
      display: none;
    }

    .close-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 18px;
      color: var(--text-secondary);
      border-radius: 3px;
      transition: background-color 0.2s;
      flex-shrink: 0;
    }

    .close-btn:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: var(--text-primary);
    }

    body.dark-mode .close-btn:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .new-tab-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 100%;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 18px;
      color: var(--text-secondary);
      transition: background-color 0.2s;
      flex-shrink: 0;
    }

    .new-tab-btn:hover {
      background-color: var(--bg-tab);
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script src="./renderer.js"></script>
</body>
</html>
